<template>
        <el-aside :width="isCollapse ? '180px' : '64px'">
            <el-menu 
                class="el-menu-vertical-demo" 
                background-color="#545c64" 
                text-color="#FFFFFF" 
                :collapse=" !isCollapse"
                :collapse-transition="false"
            >
                <div class="title" v-show="isCollapse">小小糖管理平台</div>
                <div class="title" v-show="!isCollapse"><el-icon><Platform /></el-icon></div>
                <el-menu-item :index="item.path" v-for="item in noChildren()" :key="item.path" @click="handleMenu(item)">
                    <component class="icons" :is="item.meta.icon"></component>
                    <span>{{item.meta.title}}</span>  
                </el-menu-item>
                <el-sub-menu :index="item.path" v-for="item in hasChildren()" :key="item.path">
                    <template #title>
                        <component class="icons" :is="item.meta.icon"></component>
                        <span>{{item.meta.title}}</span>  
                    </template>
                    <el-menu-item-group>
                        <el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="handleMenu(subItem)">
                            <component class="icons" :is="subItem.meta.icon"></component>
                            <span> {{subItem.meta.title}}</span> 
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </el-aside>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '../../../store/index'
import { useRouter } from 'vue-router'
const store = useStore()
const router = useRouter()
const { isCollapse, menuList } = storeToRefs(store)


onMounted(() => {
   noChildren() 
   hasChildren()
})


const noChildren = () => {
    return menuList.value.filter((item) => !item.children)
}
const hasChildren = () => {
    return menuList.value.filter((item) => item.children)
}


const handleMenu = (obj) => {
    console.log(obj)
    router.push({
        path: obj.path
    })
}
</script>

<style lang="scss" scoped>
.icons{
    width: 18px;
    height: 18px;
    margin-top: -3px;
    margin-right: 5px;
}
.el-menu{
    border-right: none;
    > .title{
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        color: #FFFFFF;
    }
}
</style>





